<template>
  <div style="height: 100%">
    <el-row class="nav">
      <i class="el-icon-arrow-left"
         @click="goBack"></i>
      <span class="font-weight">编辑菜单</span>
    </el-row>
    <el-divider></el-divider>
    <el-row style="width:60%;margin:0 auto">
      <el-form ref="form"
               :model="form"
               label-width="100px"
               :rules="rules">
        <el-form-item label="菜单名称"
                      prop="menuName">
          <el-input v-model="form.menuName"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单描述">
          <el-input type="textarea"
                    v-model="form.menuDesc"></el-input>
        </el-form-item>
        <el-form-item label="菜单状态">
          <el-radio v-model="form.status"
                    :label=1
                    :disabled="form.tagId === 1">启用</el-radio>
          <el-radio v-model="form.status"
                    :label=0
                    :disabled="form.tagId === 1">停用</el-radio>
        </el-form-item>
        <el-form-item label="菜单可见范围">
          <el-select v-model="region"
                     placeholder="请选择活动区域"
                     clearable
                     @change="changeMenuRange">
            <el-option v-for="item in menuRange"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
          <!-- 部门 -->
          <el-cascader v-if="deptShow == 'dept'"
                       expand-trigger="hover"
                       :options="userOptions"
                       :props="{value:'value',label:'label',children:'children',multiple: true,checkStrictly: true }"
                       v-model="userValue"
                       @change="handleChange">
          </el-cascader>
          <!-- 其他的 -->
          <el-select style="width:250px"
                     v-else-if="deptShow !== 'all'"
                     multiple
                     default-first-option
                     v-model="userValue"
                     filterable
                     placeholder="请添加用户">
            <el-option :style="{'width':'200px','margin-left':'20px'}"
                       v-for="item in userOptions"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态顺序"
                      prop="ordering"
                      style="width:180px">
          <el-input type="status"
                    v-model.number="form.ordering"
                    autocomplete="off"
                    :disabled="form.tagId === 1">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     class="el-button el-button--primary el-button--medium h30Btn fr"
                     @click="onSubmit('form')">完成</el-button>
          <!-- <el-button>取消</el-button> -->
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import { selectById, userSelectOrder, selectAllMenuVisibleType, updateContent } from '@/api/typeMenu.js'
export default {
  data () {
    return {
      deptShow: 'all',
      value: [],
      form: {
        menuName: '',
        menuDesc: '',
        status: '',
        state: '',
        ordering: ''
      },
      region: '',
      menuRange: [],
      userOptions: [],
      userValue: [],
      state: '',
      rules: {
        menuName: [
          { required: true, message: '请输入菜单名称', trigger: ['blur', 'change'] }
        ],
        ordering: [
          { required: true, message: '不能为空' },
          { type: 'number', message: '必须为数字值' }
        ]
      }
    }
  },
  mounted () {
    this.getSelectById()
  },
  methods: {
    // 返回到上一步
    goBack () {
      this.$router.push('/customMenu')
    },
    // 人/角色/部门数据赋值
    selectAlllInfoFun (val) {
      if (val === 'user') {
        return window.CONFIG.selectAllInfo.userList
      } else if (val === 'role') {
        return window.CONFIG.selectAllInfo.roleList
      } else if (val === 'dept') {
        return window.CONFIG.selectAllInfo.deptList
      } else if (val === 'all') {
        return []
      }
    },
    // 获取类型可见范围
    getUserSelectOrder (val) {
      this.deptShow = val
      this.userOptions = []
      this.userOptions = this.selectAlllInfoFun(val)
      // userSelectOrder(val).then(res => {
      //   if (res.data.retCode === 200 && res.data.data) {
      //     this.userOptions = res.data.data
      //     // this.userValue = []
      //   }
      // })
    },
    changeMenuRange (val) {
      this.deptShow = val
      this.userOptions = ''
      this.userValue = []
      this.getUserSelectOrder(val)
    },
    async getSelectById () {
      selectAllMenuVisibleType().then(res => {
        if (res.data.retCode === 200) {
          this.menuRange = res.data.data
        }
      })
      let id = this.$store.state.typeMenuId
      let _this = this
      await selectById(id).then(res => {
        let data = res.data
        if (data.retCode === 200) {
          _this.form = data.data
          _this.region = data.data.menuVisibleType
          if (_this.region == 'dept') {
            _this.userValue = JSON.parse(data.data.menuVisibleIds)
          } else {
            _this.userValue = data.data.menuVisibleIds ? data.data.menuVisibleIds.split(',') : ''
          }
          _this.getUserSelectOrder(_this.region)
        }
      })
    },
    onSubmit (form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          let params = {
            id: this.$store.state.typeMenuId,
            menuDesc: this.form.menuDesc,
            menuName: this.form.menuName,
            ordering: this.form.ordering,
            status: this.form.status,
            tagId: this.form.tagId,
            tagName: this.form.tagName,
            userId: this.$store.state.userId,
            visibleRange: {
              type: this.region,
              value: this.userValue || [],
              nameList: ''
            },
            workOrderTypeId: this.form.workOrderTypeId,
            workOrderTypeName: this.form.workOrderTypeName
          }
          if (!params.userId) {
            this.$message({
              type: 'error',
              message: '请选择当前用户'
            })
          } else {
            updateContent(params).then(res => {
              let data = res.data
              if (data.retCode === 200) {
                this.$message({
                  message: res.data.msg,
                  type: 'success'
                })
                this.$router.push({
                  path: '/customMenu'
                })
              } else {
                this.$message({
                  message: res.data.msg,
                  type: 'error'
                })
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    createStateFilter (queryString) {
      return (state) => {
        // return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
        return queryString
      }
    },
    handleSelect (item) {
      // this.state = item
    }
  }
}
</script>
<style scoped>
.el-icon-arrow-left {
  font-size: 13px;
  color: #b60028;
  font-weight: 700;
  padding: 0 5px;
  cursor: pointer;
}

.el-select {
  margin-right: 16px;
}

.el-button--primary {
  float: right;
  margin-top: 8px;
}
</style>
